<template>
	<view class="">

		<view v-if="list.length>0" @click="on_confirm(index,item)" class="b-news-list" v-for="(item, index) in list"
			:key="index">
			<view class="flex " v-if="item.imgs.length === 1">
				<text class="b-news-title">{{item.title}}</text>
				<view class="">
					<image class="img-list" :src="vo|getImg" v-for="(vo, index1) in item.imgs" :key="index1" />
				</view>
			</view>
			<view class="flex b-flex-direction" v-if="item.imgs.length === 2">
				<text class="b-news-title">{{item.title}}</text>
				<view class="">
					<image class="image-list-two" :src="item.imgs[0]|getImg" />
				</view>
			</view>
			<view class="flex " v-if="item.imgs.length === 0">
				<text class="b-news-title">{{item.title}}</text>
			</view>
			<view class="flex b-flex-direction" v-if="item.imgs.length >= 3">
				<text class="b-news-title">{{item.title}}</text>
				<view class="" style="padding-top: 20rpx;">
					<image class="img-list" :src="vo|getImg" v-for="(vo, index1) in item.imgs" :key="index1" />
				</view>
			</view>
			<view class="flex" style="border-bottom: solid 1rpx #ebebeb;padding: 20rpx 0;">
				<text class="info-text flex">{{item.like}}赞</text>
				<text class="info-text">{{item.reply}}条评论</text>
				<text class="info-text flex j-f">{{item.create_time|getTimer}}</text>
			</view>
		</view>
		<view class="" v-if="list.length==0">
			<view class="pt3" style="width: 750rpx;text-align: center;">

				<icon-box size="180" color="#ccc"></icon-box>
				<view class="pt2" style="color: #ccc;">暂无数据</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: function(e) {
					return {}
				}
			},
			list: {
				type: Array,
				default: function(e) {
					return []
				}
			}
		},
		methods: {
			on_confirm(index, item) {
				this.$emit('confirm', index, item);
			},
			close(e) {
				this.$emit('close');
			}
		}
	}
</script>

<style>
	.flex {
		display: flex;
	}

	.b-news-list {
		position: relative;
		flex: 1;
		flex-direction: column;
		margin: 30rpx;

	}

	.b-news-title {
		flex: 1;
		lines: 3;
		text-overflow: ellipsis;
		font-size: 30rpx;
		color: #333;
		font-weight: 800;

	}



	.b-flex-direction {
		flex-direction: column;
	}

	.b-row {
		flex-direction: row;
	}

	.b-row-reverse {
		flex-direction: row-reverse;
	}

	.image-list-two {
		margin-top: 20rpx;
		width: 690rpx;
		height: 381rpx;
		border-radius: 10rpx;
	}

	.img-list {
		margin: 5rpx;
		width: 222rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.info-text {
		flex-grow: 1;
		flex-basis: 0;
		color: #999999;
		font-size: 24rpx;
		text-align: center;
	}
</style>